/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-3-8 10:37:42
 * @description 项目管理-财务数据组件
 */
<template>
    <div class="ca-box ca-m-t-20">
      <div class="ca-p-22">
        <div class="ca-title">
          <el-row class="ca-m-t-20">
              <el-col :span="12" class="ca-title">
                  <h3>财务数据</h3>
              </el-col>
              <el-col :offset="8" :span="4">
                  <el-button v-if="editOrIndex" type="text" class="ca-edit-btn el-icon-edit ca-m-r-10 right-fs-30" @click="financialDataEdit" :disabled="!isAuth">编辑</el-button>
                  <!-- <i  class="el-icon-edit-outline right-fs-30" @click="financialDataEdit"></i> -->
                  <el-button v-if="editOrIndex && typeBak" type="primary" @click="alarm" size="small">预警配置</el-button>
                  <el-button v-if="!editOrIndex" type="primary" size="small" @click="save">保存</el-button>
                  <el-button v-if="!editOrIndex" type="primary" size="small" plain @click="cancel">取消</el-button>
              </el-col>
          </el-row>
          <!-- <i class="el-icon-edit-outline right-fs-30" @click="financialDataEdit"></i>

          <h3>财务数据</h3> -->
        </div>
        <el-form class="ca-m-t-15" v-if="editOrIndex && !showAlarm">
          <el-form-item label-width="20px" class="bg">
            <el-col :span="1">
              <h5>时间：</h5>
            </el-col>
            <el-col :span="5">
              <el-select size="mini" placeholder="请选择" v-model="reportDate" @change="getItemFinanceEntity()">
               <el-option v-for="(item,index) in initView.time" :key="index" :label="item.name" :value="item.name">
                   {{item.name===''?'全部':item.name}}
               </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-date-picker size="mini" placeholder="选择起始年份" type="year" v-model="searchParams.startYear" value-format="yyyy" @change="getItemFinanceEntity()"></el-date-picker> ——
              <el-date-picker size="mini" placeholder="选择截止年份" type="year" v-model="searchParams.endYear" value-format="yyyy" @change="getItemFinanceEntity()"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="ca-m-t-10" v-if="!showAlarm">
            <el-tabs v-model="searchParams.dataType" type="card" @tab-click="changeTab">
                <el-tab-pane label="利润表" name="1">
                    <csFileList v-if="!editOrIndex&&searchParams.dataType==1" class="ca-m-t-20" :fileType="fileType" :businessId="searchParams.itemId" :isShowSearch="false" :isShowFileChildType="false" :addAuth="addAuth" @addDot="addDot"></csFileList>
                </el-tab-pane>
                <el-tab-pane label="资产负债表" name="2">
                    <csFileList v-if="!editOrIndex&&searchParams.dataType==2" class="ca-m-t-20" :fileType="fileType" :businessId="searchParams.itemId" :isShowSearch="false" :isShowFileChildType="false" :addAuth="addAuth" @addDot="addDot"></csFileList>
                </el-tab-pane>
                <el-tab-pane label="现金流量表" name="3">
                    <csFileList v-if="!editOrIndex&&searchParams.dataType==3" class="ca-m-t-20" :fileType="fileType" :businessId="searchParams.itemId" :isShowSearch="false" :isShowFileChildType="false" :addAuth="addAuth" @addDot="addDot"></csFileList>
                </el-tab-pane>
                <el-tab-pane v-if="typeBak" label="其他" name="4">
                    <csFileList v-if="!editOrIndex&&searchParams.dataType==4" class="ca-m-t-20" :fileType="fileType" :businessId="searchParams.itemId" :isShowSearch="false" :isShowFileChildType="false" :addAuth="addAuth" @addDot="addDot"></csFileList>
                </el-tab-pane>
            </el-tabs>
        </div>
        <table class="ca-table table_02 table_03 myTable ca-m-t-20" v-if="editOrIndex && !showAlarm" id="profitTable">
        </table>
        <csAlarmConfigure v-if="editOrIndex && showAlarm" @close="closeAlram"></csAlarmConfigure>
        <div v-if="!editOrIndex" class="ca-m-t-20">
            <div class="fd-color">
                <p>说明：</p>
                <p>1.只能上传Excel文件</p>
                <p>2.上传的Excel数据第一行和第二行必须固定如下格式</p>
            </div>
            <table class="ca-table table_02 table_03 myTable ca-m-t-20">
                <tr>
                    <th>报告期</th>
                    <td>年报</td>
                    <td>年报</td>
                    <td>季度报</td>
                    <td>季度报</td>
                    <td>季度报</td>
                    <td>半年报</td>
                    <td>半年报</td>
                    <td>半年报</td>
                </tr>
                <tr>
                    <th>日期</th>
                    <td>2010</td>
                    <td>2012</td>
                    <td>2010Q1</td>
                    <td>2010Q2</td>
                    <td>2010Q3</td>
                    <td>2010Q4</td>
                    <td>2010上半年</td>
                    <td>2010下半年</td>
                </tr>
                <tr>
                    <th>字段A</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>字段B</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">

import { api } from '__service/api';
import { apiHttp, STATUS_HTTP_SUCCESS } from '__service/csHttp';
import { addRemind } from '__service/utils';
    export default {
        data() {
            return {
                fileType: '10009',
                searchParams: {
                    itemId: this.$route.params.itemId,
                    dataType: '1',//内容类型 1:利润表 2:资产负债表  3:现金流量表  4：其他
                    reportDate: '',//报告期
                    startYear: '',//起始年份
                    endYear: ''//截止年份
                },
                reportDate: '全部',
                editOrIndex: true,
                showAlarm: false,
                initView: {
                    // financeType: this.$store.state.user.dictionaryMap.financeType,//内容类型 1:利润表 2:资产负债表  3:现金流量表  4：其他
                    time: [{name: ''}]
                }
            }
        },
        watch: {
            'searchParams.dataType': {
                handler: function (val) {
                    if (val === '1') {
                        this.fileType = '10009'
                    } else if (val === '2') {
                        this.fileType = '10030'
                    } else if (val === '3') {
                        this.fileType = '10019'
                    } else {
                        this.fileType = '10118'
                    }
                },
                deep: true
            }
        },
        props: {
            typeBak: {
                type: Boolean,
                default: false
            },
            isAuth: {
                type: Boolean,
                default: false
            },
            dataType: {
                type: Number,
                default: 1
            },
            addAuth: {
                type: String,
                default: ''
            }
        },
        mounted() {
            this.getItemFinanceEntity()
        },
        methods: {
            // 查询财务数据列表
            async getItemFinanceEntity() {
                if (this.reportDate === '全部') {
                    this.searchParams.reportDate = ''
                } else {
                    this.searchParams.reportDate = this.reportDate
                }
                const { resCode,data } = await apiHttp(api.GET_ITEM_FINANCE_ENTITY,this.searchParams)
                if (resCode === STATUS_HTTP_SUCCESS) {
                    let htmlContent = '';
                    let trLength = 0
                    // 时间下拉选项
                    this.initView.time = ['全部']
                    if (data.length > 0) {
                        if (data[0][0] === '报告期') {
                            data[0].map((item,index) => {
                                if (index > 0) {
                                    this.initView.time.push(item)
                                }
                            })
                        } else if (data[1][0] === '报告期') {
                            data[1].map((item,index) => {
                                if (index > 0) {
                                    this.initView.time.push(item)
                                }
                            })
                        }
                        let initViewTime = [...new Set(this.initView.time)]//去重
                        // 饿了么下拉必须将数组项变为对象的形式
                        this.initView.time = initViewTime.map((u) => {
                            return {name: u}
                        })
                    }
                    data.map((item,indexOut) => {
                        let trContent = '';
                        trLength = item.length > trLength ? item.length : trLength;
                        item.map((tdContent,index) => {
                            if (index === 0) {
                              if (indexOut === 0) {
                                if (this.typeBak) {
                                  trContent += '<th>' + tdContent + '</th>';
                                } else {
                                  trContent += '<th>单位：万元</th>';
                                }
                              } else {
                                trContent += '<th>' + tdContent + '</th>';
                              }
                            } else {
                                trContent += '<td>' + tdContent + '</td>';
                            }
                        })
                        trContent += this.addTd(item, trLength);
                        htmlContent += '<tr>' + trContent + '</tr>';
                    })
                    document.getElementById('profitTable').innerHTML = htmlContent;
                }
            },
            // 点击切换tab
            changeTab(tab) {
                this.searchParams.dataType = tab.name
                if (this.editOrIndex) {
                    this.getItemFinanceEntity()
                }
            },
            //对于td不够进行补充
            addTd(arrContent, maxArrLength) {
                let retTdContent = '';
                for (let i = 0; i < (maxArrLength - arrContent.length); i++) {
                    retTdContent += '<td></td>';
                }
                return retTdContent;
            },
            // 预警配置
            alarm() {
                this.showAlarm = true
            },
            // 关闭预警
            closeAlram() {
                this.showAlarm = false
                this.getItemFinanceEntity()
            },
            // 编辑按钮
            financialDataEdit() {
                this.editOrIndex = false
            },
            // 保存按钮
            save() {
                this.editOrIndex = true
                this.getItemFinanceEntity()
            },
            // 取消按钮
            cancel() {
                this.editOrIndex = true
                this.getItemFinanceEntity()
            },
            async addDot() {
                // 添加小红点
                await addRemind({
                    dataId: this.$route.params.itemId, // 业务id
                    dataTab: 3, // tab页顺序 head 也为0 新建为'-1'
                    dataType: this.dataType, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
        },
        components: {
          csFileList: require('__components/file-list/index'),//文件列表
          csAlarmConfigure: require('__views/invested-project/financial-data/alarm-configure/index'), //创建预警
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.right-fs-30{
   float:right;
}
.bg{
   background: #909399;
   color: #fff;
}
.el-button--small, .el-button--small.is-round {
    padding: 9px 15px;
    margin-top: 10px;
}
.fd-color{
    font-weight: bolder;
    color: rgb(58, 162, 250)
}
.fd-color p{
    font-size: 18px
}
</style>
